import React, { useEffect, useRef, useState } from 'react';
import { projectAPI } from '../../../apis/project';
import './home.less';
import { Row, Col, Space, Tooltip } from 'antd';
import { FullscreenOutlined } from '@ant-design/icons';
import chart from "../common/chart";
import UiText from '../../../component/ui-text';

export default function ProjectCard(props: {
  project: any;
}) {
  const app_key = props.project.app_secret;
  const chartRef = useRef();
  const default_user_count = {
    total: 0,
    new_user: 0,
    old_user: 0,
    active_user: 0,
    code_error_count: 0,
    api_error_count: 0,
    pv_count: 0,
    slow_api_call_count: 0
  }
  const [userCount, setUserCount] = useState(default_user_count);

  useEffect(() => {
    get4hPV();
    getUserSummary();
    get24hErrorCount();
    get24hPvCount();
    get24hGatewayCallCount();
  }, []);

  // 用户统计
  function getUserSummary() {
    projectAPI
      .getUserSummary({
        app_key: app_key
      })
      .then((res: any) => {
        setUserCount((prevState => ({
          ...prevState,
          ...res.data
        })))
      })
  }

  // 24H 慢查询
  function get24hGatewayCallCount() {
    projectAPI.get24hGatewayCallCount({
      app_key: app_key,
      spendTime: 1000
    }).then((res) => {
      setUserCount((prevState => ({
        ...prevState,
        slow_api_call_count: res.data
      })))
    })
  }

  // 最近4小时 PV
  function get4hPV() {
    projectAPI.getProject4hPageView({
      app_key: app_key
    }).then((res: any) => {
      chart(chartRef.current, res.data.list);
    })
  }

  // 24h PV count
  function get24hPvCount() {
    projectAPI.get24hPvCount({
      app_key: app_key
    }).then((res: any) => {
      setUserCount((state) => ({
        ...state,
        pv_count: res.data
      }))
    })
  }

  // 最近24小时代码异常
  function get24hErrorCount() {
    projectAPI.get24hErrorCount({
      app_key: app_key,
      type: 'error'
    }).then((res) => {
      setUserCount((prevState => ({
        ...prevState,
        code_error_count: res.data
      })))
    })
    projectAPI.get24hErrorCount({
      app_key: app_key,
      type: 'api-error'
    }).then((res) => {
      setUserCount((prevState => ({
        ...prevState,
        api_error_count: res.data
      })))
    })
  }

  const avatar = "https://assets.giocdn.com/webapp/20210706/img-1nEzU2z.svg";
  return (
    <div className="card-item">
      <div className="card-name">
        <Space>
          <img width={20} src={avatar} alt=""/>
          <span color={"#191140"}>{props.project.name}</span>
        </Space>
        <FullscreenOutlined className="icon ui-pointer" size={14}/>
      </div>
      <Row className="user-count">
        <Col span={6}>
          <div className="num">{userCount.total}</div>
          <div>活跃用户</div>
        </Col>
        <Col span={6}>
          <div className="num">{userCount.active_user}</div>
          <div>用户总数</div>
        </Col>
        <Col span={6}>
          <div className="num">{userCount.old_user}</div>
          <div>老用户数</div>
        </Col>
        <Col span={6}>
          <div className="num">{userCount.new_user}</div>
          <div>新用户数</div>
        </Col>
      </Row>
      <div style={{ height: 120 }} ref={chartRef as any} />
      <div style={{
        display: 'flex',
        flexDirection: 'row',
      }}>
        <div style={{ width: 120 }}>
          <div className="circle" />
        </div>
        <div style={{ flex: 1 }}>
          <Row>
            <Col style={{ paddingLeft: '4%'}} span={12}>
              <UiText type={"gray"}>24H代码异常：</UiText>
              <span>{userCount.code_error_count}</span>
            </Col>
            <Col span={12}>
              <UiText type={"gray"}>24H接口异常：</UiText>
              <span>{userCount.api_error_count}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: 10 }}>
            <Col style={{ paddingLeft: '4%' }} span={12}>
              <Tooltip title="API响应时长超过1秒" placement={"top"}>
                <span>
                  <UiText type={"gray"}>24H慢查询数：</UiText>
                  <span>{userCount.slow_api_call_count}</span>
                </span>
              </Tooltip>
            </Col>
            <Col span={12}>
              <UiText type={"gray"}>24H访问次数：</UiText>
              <span>{userCount.pv_count}</span>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  )
}
